<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省级联动ajax版本</title>
    <script type="text/javascript" src="jquery-1.9.1.js"></script>
</head>
<body>
        <select class="province"></select>
        <select class="city"></select>

        <script type="text/javascript">
            var xhr = new XMLHttpRequest();
            xhr.open("get", "/go.do", true);
            xhr.setRequestHeader("content-Type","application/x-www-form-urlencoded");
            xhr.send();
            xhr.onreadystatechange = function () {
                if(xhr.readyState==4){
                    var json = xhr.responseText;
                    var provinces = eval("("+json+")");
                    for (index in provinces){
                        var province = provinces[index];
                        var opt = $("<option value='"+province.id+"'>"+province.name+"</option>");
                        $(".province").append(opt);
                    }
                    chg();
                }
            }
            $(".province").change(chg);

            function chg() {
                $(".city").empty();
                var xhr1 = new XMLHttpRequest();
                xhr1.open("post", "/to.do", true);
                xhr1.setRequestHeader("content-Type","application/x-www-form-urlencoded");
                xhr1.send("sid="+$(".province").val());
                xhr1.onreadystatechange = function () {
                    if(xhr1.readyState==4){
                        var json = xhr1.responseText;
                        var provinces = eval("("+json+")");
                        for (index in provinces){
                            $(".city").append($("<option>"+provinces[index].name+"</option>"));
                            console.log(provinces[index]);
                        }
                    }
                }
            }
        </script>
</body>
</html>